<template>
  <view>
   <view class="header">
     <view class="back" @click="back()">
       <uni-icons type="left" size="20"></uni-icons>
     </view>
     <text>新增收货地址</text>
   </view>
    <view class="addressInfo">
      <view class="Info-box">
        <view class="title">
          收货人
        </view>
        <input type="text" v-model="recipientName" maxlength="30" placeholder="请填写收货人姓名" />
      </view>
      <view class="Info-box">
        <view class="title">
          手机号码
        </view>
        <input type="text" v-model="phoneNumber" maxlength="11" placeholder="请填写收货人手机号码" />
      </view>
      <view class="Info-box">
        <view class="title">
          省/市/区
        </view>
        <picker mode="multiSelector" :range="multiArray" @columnchange="bindMultiPickerColumnChange">
          <input placeholder="选择收货省/市/区" v-model="address" disabled>
        </picker>
      </view>
      <view class="Info-detail">
        <view class="title">
          详细地址
        </view>
        <textarea v-model="detailAddress" maxlength="50" placeholder="街道/楼门牌号等" />
      </view>
    </view>
    <view class="container" :style="{height: wh +'px'}">
      <view class="default-box">
        <view class="title">
          设为默认地址
        </view>
        <switch color="#b6eaae" :checked="isDefault==1?true:false" @change="switchChange" />
      </view>
    </view>
    <view class="btn">
      <view class="ok" @click="ok()">
        保存
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import cityData from '../../utils/city.js'
  export default {
    data() {
      return {
        wh: 0,
        recipientName: '',
        phoneNumber: '',
        privince: '',
        city: '',
        county: '',
        detailAddress: '',
        isDefault: 0,
        multiArray: [
          ['江西省', '福建省', '湖北省', '湖南省', '广东省'],
          ['吉安市', '南昌市', '赣州市'],
          ['青原区', '吉州区']
        ],
        priId: 0,
        cityId: 0,
        countyId: 0,
        status: 0,
        addressId: '',
      };
    },
    onLoad(options) {
      const sysInfo = uni.getSystemInfoSync()
      this.wh = sysInfo.windowHeight - 350
      this.initCity()
      if (options.item != 0) {
        this.status = 1
        let {
          recipientName,
          phoneNumber,
          detailAddress,
          isDefault,
          privince,
          city,
          county,
          addressId
        } = JSON.parse(decodeURIComponent(options.item))
        this.recipientName = recipientName
        this.phoneNumber = phoneNumber
        this.detailAddress = detailAddress
        this.isDefault = isDefault
        this.privince = privince
        this.city = city
        this.county = county
        this.addressId = addressId
      }
    },
    methods: {
      back() {
        uni.navigateBack()
      },
      initCity() {
        this.multiArray = [
          [],
          [],
          []
        ]
        cityData.forEach((item1, index1) => {
          this.multiArray[0].push(item1.provinceName)
        })
        cityData[0].cities.forEach((item2, index2) => {
          this.multiArray[1].push(item2.cityName)
        })
        cityData[0].cities[0].counties.forEach((item3, index3) => {
          this.multiArray[2].push(item3.countyName)
        })
      },
      switchChange(e) {
        this.isDefault = e.detail.value === true ? 1 : 0
      },
      async ok() {
        if (this.recipientName == '') return uni.$showMsg('收货人不能为空！')
        if (this.phoneNumber == '') return uni.$showMsg('手机号码不能为空！')
        if (this.recipientName == '') return uni.$showMsg('收货人不能为空！')
        if (!this.privince || !this.city || !this.county) return uni.$showMsg('收货地址不完整！')
        if (this.detailAddress == '') return uni.$showMsg('详细地址不能为空！')
        if (this.status === 0) {
          await uni.$http.post('/users/address/addNewAddress', {
            userId: this.userInfo.studentId,
            recipientName: this.recipientName,
            phoneNumber: this.phoneNumber,
            privince: this.privince,
            city: this.city,
            county: this.county,
            detailAddress: this.detailAddress,
            isDefault: this.isDefault
          })
        } else {
          const data = await uni.$http.post('/users/address/update/baseinfo', {
            userId: this.userInfo.studentId,
            addressId: this.addressId,
            recipientName: this.recipientName,
            phoneNumber: this.phoneNumber,
            privince: this.privince,
            city: this.city,
            county: this.county,
            detailAddress: this.detailAddress,
          })
          console.log(data);
          await uni.$http.post('/users/address/updateAddressStatus', {
            userId: this.userInfo.studentId,
            addressId: this.addressId,
            isDefault: this.isDefault
          })
        }
        this.back()
      },
      bindMultiPickerColumnChange(e) {
        switch (e.detail.column) {
          case 0:
            this.privince = this.multiArray[0][e.detail.value]
            this.priId = e.detail.value
            this.multiArray[1] = []
            this.multiArray[2] = []
            cityData[e.detail.value].cities.forEach((item2, index2) => {
              this.multiArray[1].push(item2.cityName)
            })
            cityData[e.detail.value].cities[this.cityId].counties.forEach((item3, index3) => {
              this.multiArray[2].push(item3.countyName)
            })
            this.city = this.multiArray[1][this.cityId]
            this.county = this.multiArray[2][this.countyId]
            break
          case 1:
            this.city = this.multiArray[1][e.detail.value]
            this.cityId = e.detail.value
            this.multiArray[2] = []
            cityData[this.priId].cities[e.detail.value].counties.forEach((item3, index3) => {
              this.multiArray[2].push(item3.countyName)
            })
            this.county = this.multiArray[2][this.countyId]
            break
          case 2:
            this.county = this.multiArray[2][e.detail.value]
            this.countyId = e.detail.value
            break
        }
      },
    },
    computed: {
      ...mapState('my_user', ['userInfo']),
      address() {
        if (!this.privince && !this.city && !this.county) return
        return this.privince + ' ' + this.city + ' ' + this.county
      }
    }
  }
</script>

<style lang="scss">
  .header {
    position: relative;
    width: 100%;
    height: 140rpx;
    text-align: center;
    font-size: 36rpx;
    font-weight: 700;
    line-height: 170rpx;
    background-color: #fff;
  
    .back {
      position: absolute;
      top: 4rpx;
      left: 23rpx;
      height: 50rpx;
    }
  }
  
  .box {
    width: 100%;
    height: 600rpx;
    background-color: #fff;
  }

  .uni-list-cell-db {
    flex: 1;
  }

  .uni-input {
    height: 50rpx;
    padding: 15rpx 25rpx;
    line-height: 50rpx;
    font-size: 28rpx;
    background: #FFF;
    flex: 1;
  }

  .addressInfo {
    display: flex;
    flex-direction: column;
    padding: 0 30rpx;
    border-top: 1rpx solid #eee;
    background-color: #fff;

    .Info-box {
      display: flex;
      padding: 35rpx 0;
      border-bottom: 1rpx solid #eee;

      .title {
        width: 140rpx;
        font-size: 34rpx;
        font-weight: 700;
      }

      input {
        width: 400rpx;
        margin-left: 60rpx;
      }
    }

    .Info-detail {
      display: flex;
      padding: 35rpx 0;

      .title {
        width: 140rpx;
        font-size: 34rpx;
        font-weight: 700;
      }

      textarea {
        width: 400rpx;
        height: 140rpx;
        margin-left: 60rpx;
      }

    }
  }

  .container {
    margin-top: 20rpx;
    background-color: #fff;

    .default-box {
      display: flex;
      justify-content: space-between;
      padding: 30rpx;
      border-bottom: 1rpx solid #eee;
    }

  }

  .btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 130rpx;
    padding: 20rpx 30rpx;
    border-top: 1rpx solid #e9e9e9;

    .ok {
      width: 90%;
      height: 90rpx;
      border-radius: 6rpx;
      text-align: center;
      line-height: 90rpx;
      background-color: #b6eaae;
      color: #fff;
      font-size: 38rpx;
    }
  }
</style>